<template>
<div class="dashboard-container">
    <div class="topTit">
        <el-date-picker v-model="value" @change="setDate" size="mini" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
        <div class="outData" @click="outData">导出原始数据</div>
    </div>
    <div class="setContent">
        <div class="cont">
            <el-table :data="tableData" stripe>
                <el-table-column label="姓名" prop="name" width="90" fixed align="center">
                    <template scope="scope">
                        <span style="color: #3345ff;">{{scope.row.name || scope.row.userName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="workNumber" label="工号" width="120" fixed align="center" />
                <el-table-column prop="departmentName" label="部门" width="120" show-overflow-tooltip fixed align="center" />
                <el-table-column prop="post" label="职位" width="120" show-overflow-tooltip fixed />
                <div>
                    <el-table-column v-for="(item, index) in tableData[0].attendsList" :key="index" :label="item.attendDate" align="center" min-width="95" flxed>
                        
                        <template scope="scope">
                            <span style="cursor:pointer;color: #3345ff" @click="showInfo(scope.row, item)">{{tableData[scope.$index].attendsList[index].attendStatus}}</span>
                            <!-- <span style="cursor:pointer;" v-show="item.attendStatus == '缺卡'">{{item.attendStatus}}</span> -->
                        </template>
                        
                    </el-table-column>
                </div>
            </el-table>
            <!--
            <div class="pageList">
                <el-pagination v-if="total > params.pageSize" layout="prev, pager, next" @current-change="handlePageChange" :total="total">
                </el-pagination>
            </div>
            -->
        </div>
    </div>



    <el-dialog :title="title" :visible.sync="dialogVisible" center width="30%" style="border-radius: 10px;" :before-close="handleClose">
        <div class="userInfo">
            <div class="header">
                <div class="headIcon" v-if="userInfo.icon"><img :src="userInfo.icon" alt="" width="30"></div>
                <div class="headNoIcon" v-if="!userInfo.icon">{{userInfo.userName ? userInfo.userName.substring(0,1) : '无'}}</div>
                <div>
                    <div>{{userInfo.userName}}</div>
                    <div>{{userInfo.attendGroup ? userInfo.attendGroup.name : '-'}} 考勤时间: {{userInfo.attendGroup ? userInfo.attendGroup.startWorkTime : '-'}} - {{userInfo.attendGroup ? userInfo.attendGroup.offWorkTime : '-'}}</div>
                </div>
            </div>
            <div class="content">
                <div><span>打卡时间：</span> {{userInfo.attendStartWork ? userInfo.attendStartWork.punchTime : '缺卡'}} / {{userInfo.attendOffWork ? userInfo.attendOffWork.punchTime : '缺卡'}}</div>
                <div><span>打卡状态：</span> {{userInfo.attendStatus || '缺卡'}}</div>
                <div><span>打卡地址：</span> {{userInfo.address || '未知'}}</div>
                <div><span>打卡备注：</span> {{userInfo.description || '暂无备注'  }} </div>
                <div><span>打卡图片：</span>
                    <span class="headIcon" v-if="userInfo.picture"><img :src="userInfo.picture" alt="" width="30" /></span>
                    <span class="headNoIcon" v-if="!userInfo.picture">暂无</span>
                </div>
            </div>
        </div>
    </el-dialog>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
import moment from 'moment'
import { baseURL , headers} from '../../utils/request'

export default {
    name: 'Dashboard',
    filters: {
        dateFormat(val) {
            return val
        }
    },


    data() {
        return {
            value: '',
            title: '',
            total: 0,
            dialogVisible: false,
            userInfo: {},
            params: {
                startTime: '',
                endTime: ''
            },
            loading: true,
            tableData: [{}],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            },
            headers: {
                Authorization: this.$store.getters.token || ''
            }
        }

    },


    created() {
        var now = new Date();
        const stTime = now.getFullYear() + '-' + this.handleZero(now.getMonth() + 1) + '-' + '01';
        console.log(stTime)

        now.setDate(1);
        now.setMonth(now.getMonth() + 1);
        now.setDate(now.getDate() - 1);

        const endTime = now.getFullYear() + '-' + this.handleZero(now.getMonth() + 1) + '-' + this.handleZero(now.getDate())
        console.log(endTime)
        this.setValue([stTime, endTime])
        this.getAttendanceList()
    },


    methods: {
        getAttendanceList() {
            this.$store.dispatch('attendance/attendanceList', this.params).then((res) => {
                //this.total = res.total
                this.tableData = res
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },


        // 导出数据
        outData() {
            const startTime = moment(this.value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
            const endTime = moment(this.value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
            
            this.$store.dispatch('attendance/signExoprtAct', {
                startTime,
                endTime
            }).then((res) => {
                
                console.log(res);
                const $link = document.createElement('a');
                $link.href = window.URL.createObjectURL(new Blob([res]));
                $link.download = '考勤记录.xls';
                $link.click();

                // if (res.success) {
                //     const url = res.data
                //     let a = document.createElement('a')
                //     a.href = url
                //     a.click()
                // } else {
                //     this.$message.error('出错了！' + res.message)
                // }
            }).catch(() => {
                this.loading = false
            })

            //window.location.href=baseURL+"/atte/export?startTime="+startTime+"&endTime="+endTime;

        },


        setDate(value) {
            this.params.startTime = moment(value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
            this.params.endTime = moment(value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
            this.getAttendanceList(value[0], value[1])
        },


        setValue(value) {
            let date = [value[0], value[1]]
            this.params.startTime = value[0]
            this.params.endTime = value[1]
            this.value = date
        },


        showInfo(row, attend) {
            const data = row
            this.title = moment(attend.attendDate, 'YYYY-MM-DD').format('YYYY年MM月DD日')
            console.log(data)
            this.$store.dispatch('attendance/attendanceDetails', {
                    userId: row.userId,
                    attendDate: moment(attend.attendDate, 'YYYY-MM-DD').format('YYYY-MM-DD')
                })
                .then(res => {
                    console.log(res)
                    this.userInfo = res
                    this.dialogVisible = true
                })
        },


        handleClose(done) {
            done()
        },


        handlePageChange(val) {
            this.params.page = val
            this.getAttendanceList()
        },


        formatDate(val) {
            return moment(new Date(Number(val))).format('HH:mm:ss')
        },

        handleZero(m){
            if(m<10){
                return "0"+m;
            }else{
                return m;
            }
        }
    }
}
</script>

<style lang="scss">
.setContent {
    .cont {

        .el-table thead th,
        .el-table thead tr {
            background: #edeffd;
        }
    }

    .pageList {
        text-align: right;
        padding: 10px 0;

        .el-pager li {
            margin: 0 5px;
            min-width: 28px;
            width: 28px;
        }

        .active {
            background: #3345ff;
            border-radius: 100%;
            color: #fff;
        }
    }
}

.el-dialog__header {
    border-bottom: solid 1px #eaeaea;
}
</style>
<style lang="scss" scoped>
.dashboard {
    &-container {
        padding: 0 15px;

        .topTit {
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .outData {
                color: #3345ff;
                cursor: pointer;
                font-size: 14px;
            }
        }

        .setContent {
            background: #fff;
            min-height: 510px;

            .title {
                padding: 0 15px;
                line-height: 40px;
                background: #eceffc;

            }

            .cont {}
        }

        .userInfo {
            .header {
                background: rgba(40, 97, 254, 0.14);
                display: flex;
                padding: 10px 20px;
                line-height: 20px;
                border-radius: 8px;

                .headIcon {
                    width: 40px;
                    height: 40px;
                    margin-right: 10px;

                    img {
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        border-radius: 100%;
                    }
                }

                .headNoIcon {
                    font-size: 20px;
                    text-align: center;
                    line-height: 40px;
                    margin-right: 10px;
                    width: 40px;
                    height: 40px;
                    color: #fff;
                    background: #3345ff;
                    border-radius: 100%;
                }
            }

            .content {
                line-height: 35px;
                margin-top: 10px;
            }
        }
    }
}
</style>
